<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	<style type="text/css">
		<style type="text/css">

  #submenu {
    background-color: #eee;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
  #submenu:hover {
    background-color: #fc3;
    -webkit-transform: rotate(360deg) scale(2);
    -moz-transform: rotate(360deg) scale(2);
    -o-transform: rotate(360deg) scale(2);
    -ms-transform: rotate(360deg) scale(2);
    transform: rotate(360deg) scale(2);
  }

</style>
	</style>
	</head>

	<body>
<div id="submenu" style="width: 50px; height: 50px; background-color: #000000;">
	
</div>
		<p>要使用的图像：</p>
		<img id="tulip" src="../css3-image-stack-elasticity/img/1.png" alt="The Tulip" />

		<p>画布：</p>
		<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>
		<canvas id="canvas1" width="500" height="500"></canvas>
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
//			var img = document.getElementById("tulip");
			var img = new Image()
			img.src = "../css3-image-stack-elasticity/img/1.png";
			img.onload = function () {
				ctx.drawImage(img, 10, 10);
				var myImageData = ctx.getImageData('0', '0', '300', '300');
				console.log(myImageData.data.length)
				var canvas1 = document.getElementById('canvas1')
				var ctx1 = canvas1.getContext('2d')
				ctx1.putImageData(myImageData, 0, 0)
				console.log(c.toDataURL())
			}	
		</script>
	</body>
</html>